<template>
  <!-- 修改昵称 -->
  <div class="modifyName">
    <div class="van-top">
      <van-nav-bar
        title="修改昵称"
        left-arrow
        right-text="保存"
        @click-left="onClickLeft"
        @click-right="modifyName(username)"
      />
    </div>
    <van-cell-group inset>
      <van-field v-model.trim="username" placeholder="请输入昵称" />
    </van-cell-group>
  </div>
</template>

<script>
import userModule from '@/store/modules/user'
import { Toast } from 'vant'

export default {
  name: 'modifyName',
  data() {
    return {
      username: '',
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters['userModule/userInfo']
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push('/update')
    },
    modifyName(username) {
      if (!this.username) {
        Toast('请输入要修改昵称')
      } else {
        // let data = {
        //   msg: this.username,
        // }
        // console.log(data)
        // localStorage.setItem('username', data.msg)
        console.log(this.$store.getters['userModule/userInfo'].nickname)
        this.$store.commit('userModule/modifyName', username)
        Toast.success('修改成功')
        console.log(this.$store.getters['userModule/userInfo'].nickname)
      }
    },
  },
}
</script>

<style scoped>
.update {
  background: #f2f2f2;
}
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}
.van-cell-group {
  margin-top: 10px;
  border: 1px solid #888;
}
</style>
